<template>
	<view class="feedback-page">
		<!-- 导航栏 -->
		<nav-bar></nav-bar>
		<!-- 反馈内容区域 -->
		<view class="feedback-content">
			<textarea
				class="feedback-textarea"
				v-model="feedbackContent"
				placeholder="亲爱的会员，您的每一次体验对我们都至关重要。为了给您带来更优质的服务，诚邀您分享宝贵意见。无论是满意之处还是有待提升的地方，都将帮助我们不断进步，感谢您的推动力。"
				:maxlength="500"
				placeholder-class="placeholder-style"
			></textarea>
			<view class="word-count">{{feedbackContent.length}}/500</view>
		</view>

		<!-- 联系信息 -->
		<view class="contact-info">
			<view class="input-group">
				<text class="label">姓名</text>
				<input 
					type="text" 
					v-model="name"
					placeholder="请输入您的姓名"
					placeholder-class="input-placeholder"
				/>
			</view>
			<view class="input-group">
				<text class="label">联系电话</text>
				<input 
					type="number" 
					v-model="phone"
					placeholder="请留下您的联系方式"
					placeholder-class="input-placeholder"
				/>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<button class="submit-btn" @tap="submitFeedback">提交反馈</button>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
	data() {
		return {
			feedbackContent: '',
			name: '',
			phone: ''
		}
	},
	methods: {
		submitFeedback() {
			// 表单校验
			if (!this.feedbackContent.trim()) {
				uni.showToast({
					title: '请输入反馈内容',
					icon: 'none'
				})
				return
			}

			if (!this.name.trim()) {
				uni.showToast({
					title: '请输入您的姓名',
					icon: 'none'
				})
				return
			}

			if (!this.phone.trim()) {
				uni.showToast({
					title: '请输入联系电话',
					icon: 'none'
				})
				return
			}

			// 手机号格式校验
			// 正则表达式说明：^1[3-9]\d{9}$
			// ^ - 字符串开始
			// 1 - 以数字1开头
			// [3-9] - 第二位数字为3-9之间
			// \d{9} - 后面跟9位数字
			// $ - 字符串结束
			// 总共11位，符合中国大陆手机号格式
			const phoneReg = /^1[3-9]\d{9}$/
			if (!phoneReg.test(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}

			// 获取用户信息
			const userInfoStr = uni.getStorageSync('userInfo')
			if (!userInfoStr) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return
			}

			let userInfo = null
			
			if (userInfoStr) {
			  try {
			    // 如果是字符串，尝试解析
			    if (typeof userInfoStr === 'string') {
			      const parsed = JSON.parse(userInfoStr)
			      // 检查是否是登录响应格式
			      if (parsed.code === 200 && parsed.data) {
			        userInfo = parsed.data
			      } else {
			        userInfo = parsed
			      }
			    } else {
			      // 如果不是字符串，直接使用
			      userInfo = userInfoStr
			    }
			  } catch (e) {
			    console.error('解析用户信息失败', e)
			    // 解析失败时，尝试直接使用
			    userInfo = userInfoStr
			  }
			}
			
			if (!userInfo || !userInfo.memberId) {
				uni.showToast({
					title: '用户信息获取失败，请重新登录',
					icon: 'none'
				})
				return
			}
			
			// 构建反馈数据
			const feedbackData = {
				userId: userInfo.memberId,
				content: this.feedbackContent,
				contactName: this.name,
				contactPhone: this.phone
			}

			// 发送请求
			uni.request({
				url: `${uni.$config.baseUrl}/feedback/feedback`,
				method: 'POST',
				data: feedbackData,
				success: (res) => {
					if (res.statusCode === 200 && res.data.code === 200) {
						uni.showToast({
							title: '反馈提交成功',
							icon: 'success'
						})
						// 清空表单
						this.feedbackContent = ''
						this.name = ''
						this.phone = ''
						
						// 延迟返回上一页
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/my'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.data.msg || '提交失败',
							icon: 'none'
						})
					}
				},
				fail: (err) => {
					console.error('提交反馈失败:', err)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">
.feedback-page {
	min-height: 100vh;
	background-color: #F8F8F8;
	padding: 30rpx;

	.feedback-content {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		position: relative;
		margin-bottom: 30rpx;

		.feedback-textarea {
			width: 100%;
			height: 300rpx;
			font-size: 28rpx;
			line-height: 1.6;
			color: #333333;
			padding: 0;
		}

		.placeholder-style {
			color: #999999;
			font-size: 28rpx;
			line-height: 1.6;
		}

		.word-count {
			position: absolute;
			right: 30rpx;
			bottom: 20rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.contact-info {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 0 30rpx;
		margin-bottom: 60rpx;

		.input-group {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #EEEEEE;

			&:last-child {
				border-bottom: none;
			}

			.label {
				width: 140rpx;
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
			}

			.input-placeholder {
				color: #999999;
			}
		}
	}

	.submit-section {
		padding: 40rpx 0;

		.submit-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: #2B87FF;
			color: #FFFFFF;
			font-size: 32rpx;
			border-radius: 44rpx;
			border: none;
			font-weight: 500;

			&:active {
				opacity: 0.9;
			}
		}
	}
}
</style> 